<template>
  <div class="form">
    <div class="title">用箱需求</div>
    <el-form ref="form"
             :disabled="seeFlag"
             :model="form"
             label-width="120px"
             size="small"
             inline
             label-suffix="："
             :rules="rules">
      <el-form-item label="作业码头"
                      prop="termCode">
            <el-select clearable style="width: 150px" size="small" 
                   v-model="form.termCode" placeholder="请选择作业码头" @change="$emit('setTerm',form.termCode)">
            <el-option  :label="item.cnName" :value="item.termCode"  v-for="item,index in termList" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <!-- @change="getVel" <el-form-item label="码头作业区"
                    prop="workZone">
          <el-select v-model="form.workZone"
                    :disabled="!form.termCode"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
              <el-option v-for="item in dataList.workZone"
                     :key="item.id"
                     :label="item.cnName"
                     :value="item.id"></el-option>
            </el-select>
      </el-form-item> -->
      <el-form-item label="计划箱数"
                    prop="plannum">
        <el-input v-model="form.plannum"
                  placeholder="请输入"
                  clearable
                  style="width:150px"></el-input>
      </el-form-item>
      <el-form-item label="持箱人"
                    prop="cstCopercd">
         <el-select v-model="form.cstCopercd"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
                   <el-option  :label="item.relationTenantName" :value="item.relationTenantId"
                      v-for="item,index in dataList.cstCoperList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船公司箱型"
                    prop="ctypecd">
        <el-select  clearable style="width: 150px" size="small"
                    v-model="form.typeSize" @change="ctypecd" placeholder="请选择船公司箱型">
          <el-option  :label="item.containerType+'/'+item.containerSize" :value="[item.containerType,item.containerSize]"  
          v-for="item,index in dataList.boxList" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="船名航次"
                    prop="ivoyId">
          <el-tooltip :content="form.voyName"
                      placement="bottom"
                      popper-class="testtooltip" v-if="seeFlag">
                  <el-select v-model="form.ivoyId"
                    @change="ivoyId"
                   placeholder="搜索查询更多"
                   clearable
                   filterable
                   remote
                   :remote-method="remoteMethod"
                   style="width:150px">
                   <el-option  :label="item.termCode + '/' + item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')" :value="item.id"  
                   v-for="item,index in shipNo" :key="index"></el-option>
        </el-select>
         </el-tooltip>            
        <el-select v-model="form.ivoyId"
                    @change="ivoyId"
                   placeholder="搜索查询更多"
                   clearable
                   filterable
                   remote
                   :remote-method="remoteMethod"
                   style="width:150px"
                   v-else>
                   <el-option  :label="item.termCode + '/' +item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')" :value="item.id"  
                   v-for="item,index in shipNo" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="贸易类型"
                    prop="internalfg">
        <el-select v-model="form.internalfg"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
                   <el-option  :label="item.meaning" :value="item.lowValue"  
                   v-for="item,index in dataList.INTERNALFG_IM" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="坏/污"
                    prop="dirtyfg">
        <el-select v-model="form.dirtyfg"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
                   <el-option  :label="item.meaning" :value="item.lowValue"  
                   v-for="item,index in dataList.DIRTYCD" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="附加操作"
                    prop="additionalcode">
        <el-select v-model="form.additionalcode"
                   placeholder="请选择"
                   clearable
                   filterable
                   style="width:150px">
                   <el-option  :label="item.meaning" :value="item.lowValue"  
                   v-for="item,index in dataList.ADDTIONALOPERATE" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用箱备注"
                    prop=""
                    style="display:block">
        <el-input type="textarea"
                  placeholder="请输入船期备注"
                  clearable
                  v-model="form.remark"
                  style="width:710px"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'boxNoNumForm',
  components: {  },
  props: {
    seeFlag:{
      default:false
    }
  },
  data() {
    return {
      termList:[],
      form: {},
      oriForm: {},
      rules: {
        termCode: [
          { required: true, message: '请选择作业码头', trigger: 'change' },
        ],
        termZone: [
          { required: true, message: '请选择码头作业区', trigger: 'change' },
        ],
        plannum: [
          { required: true, message: '请选择计划箱数', trigger: 'change' },
        ],
        cstCopercd: [
          { required: true, message: '请选择持箱人', trigger: 'change' },
        ],
        ctypecd: [
          { required: true, message: '请选择船公司箱型', trigger: 'change' },
        ],
        internalfg: [
          { required: true, message: '请选择贸易类型', trigger: 'change' },
        ],
      },
      dataList:{},
      shipNo:[],
    }
  },
  // watch:{
  //   form(){
  //     this.form.workzoneName='河西港'
  //     this.$emit('set',this.form.termCode)
  //   },

  // },
  watch:{
    form(){
      console.log(this.form)
      if(this.form.ctypecd&&this.form.cszCsizecd){
        this.form.typeSize=[this.form.ctypecd,this.form.cszCsizecd]
      }
      if(this.form.id){
        this.voyId(this.form.ivoyId)
      }
    },
  },
  methods: {
    getWork(){
      this.$api.opaAreaCode({
        termCode:this.form.termCode
      }).then(res=>{
        this.dataList.workZone=res.data.data
        this.$forceUpdate()
      }).catch()
    },
    voyId(id){
      console.log(99999)
      //console.log(this.shipNo)
      this.shipNo.forEach(item=>{
        if(id===item.id){
          this.form.voyName=item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')
          console.log(this.form.voyName)
        }
      })
    },
    ivoyId(id){
      this.shipNo.forEach(item=>{
        if(id===item.id){
          this.form.voyName=item.vslName+'/'+item.voyage+'/'+(item.iefg==='I'?'进口':'出口')
        }
      })
    },
    ctypecd(cd){
      this.form.ctypecd=cd[0]
      this.form.cszCsizecd=cd[1]
      // this.dataList.boxList.forEach(item => {
      //   if(cd===item.containerType){
      //     //this.form.ctypecd=item.containerType
      //     this.form.cszCsizecd=item.containerSize
      //   }
      // });
    },
    
    remoteMethod(val = ''){
      this.$api.voyagesVslVoy({
        termCode:this.form.termCode || '',//码头编码
        schedulesType:this.$route.name == 'emptyBoxNoNum'?'CONTAINER':'',//件散货BULK_CARGO，集装箱CONTAINER
        
        iefg:this.$route.name == 'emptyBoxNoNum'?'I':'',//进出口 进口I,出口E
        something:val,//模糊查询参数
      }).then(res=>{
        this.shipNo=res.data
        if(this.form.id){
          this.voyId(this.form.ivoyId)
        }
      }).catch()
    },
    getDate(){
      this.dataList={
        INTERNALFG_IM:[],
        OVER_LMT_CD:[],
        DIRTYCD:[],
        ADDTIONALOPERATE:[],
        cus:[],
        boxSize:[],
        ports:[],
        hz:[],
        hd:[],
        danger:[],
        union:[]
      }
      this.$api.term().then(res => {
					this.termList = res.data.data
			})
      //boxSize 箱型
      //cus 持箱人
      //shipNo 航名
      //INTERNALFG_IM 贸易类型
      //DIRTYCD 坏/污
      //ADDTIONALOPERATE 附加操作
      this.$api.getDangerUnionno().then(res=>{
        this.dataList.union=res.data
      }).catch()
      this.$api.voyagesVslVoy({
        termCode:this.form.termCode || '',//码头编码
        schedulesType:this.$route.name == 'emptyBoxNoNum'?'CONTAINER':'',//件散货BULK_CARGO，集装箱CONTAINER
        
        iefg:this.$route.name == 'emptyBoxNoNum'?'I':'',//进出口 进口I,出口E
        something:'',//模糊查询参数
      }).then(res=>{
        this.shipNo=res.data
        if(this.form.id){
          this.voyId(this.form.ivoyId)
        }
      }).catch()
      this.$api.dangerCode().then(res=>{
        this.dataList.danger=res.data.data
        this.$forceUpdate()
      }).catch()
       this.$api.port().then((res) => {
          this.dataList.ports = res.data.data
          this.$forceUpdate()
        }).catch()
      this.$api.customerByType({
        tenantTypeName:'货主'
      }).then(res=>{
        this.dataList.hz=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.customerByType({
        tenantTypeName:'货代'
      }).then(res=>{
        this.dataList.hd=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.getCustomerRelations({
        //termCode:'HX'
      }).then(res=>{
        this.dataList.cstCoperList=res.data
        this.$forceUpdate()
      }).catch()
      this.$api.containerTypeSizeInfo().then(res=>{
        this.dataList.boxList=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.refCode({
        domain:'DIRTYCD'
      }).then(res=>{
        this.dataList.DIRTYCD=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.refCode({
        domain:'ADDTIONALOPERATE'
      }).then(res=>{
        this.dataList.ADDTIONALOPERATE=res.data.data
        this.$forceUpdate()
      }).catch()
      this.$api.refCode({
        domain:'INTERNALFG_IM'
      }).then(res=>{
        this.dataList.INTERNALFG_IM=res.data.data
        this.$forceUpdate()
      }).catch()
    }
  },

  computed: {},

  mounted() {
    this.getDate()
  },
}
</script>
<style lang='scss' scoped>
.form {
  background-color: #fff;
  padding: 20px;
  .title {
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 16px;
    border-left: 5px solid #0f47b8;
    line-height: 16px;
    padding-left: 8px;
    margin-bottom: 25px;
  }
}
.btn {
  text-align: center;
  .search {
    background: #0f47b8;
    height: 30px;
    padding: 5px 10px;
  }
}
:deep .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
</style>